<template>
    <!-- 销售情况 -->
    <div class="sales-echart">
        <echart-title title="销售情况"></echart-title>
        <div class="sales-content bj-column-center">
            <div style="padding: 0px 24px 12px;width:100%;">
                <div class="bj-flex-between">
                    <div class="sales-item bj-column-center">
                        <div class="item-number">
                            <countTo :startVal="0" :endVal="612" :duration="2000" :decimals="2"></countTo>
                        </div>
                        <div>平台成交总额</div>
                    </div>
                    <div class="sales-item bj-column-center">
                        <div class="item-number">
                            <countTo :startVal="0" :endVal="213" :duration="2000" :decimals="2"></countTo>
                        </div>
                        <div>充值金额</div>
                    </div>
                    <div class="sales-item bj-column-center">
                        <div class="item-number">
                            <countTo :startVal="0" :endVal="752" :duration="2000" :decimals="2"></countTo>
                        </div>
                        <div>销售金额</div>
                    </div>
                </div>
                <div class="sales-title">
                    全球排名
                </div>
            </div>
            <div class="sales-echarts" ref="salesId"></div>
        </div>
        
    </div>
</template>

<script>
import echartTitle from "@/components/echartTitle.vue";
import countTo from 'vue-count-to';
export default {
    components:{
        echartTitle,
        countTo,
    },
    props:{
        
    },
    data () {
        return {
            
        }
    },
     mounted () {
        this.initChart();
    },
    methods: {
        initChart(){
            var getname = ['郑州','武汉','合肥','杭州','深圳','上海','北京'];
            var getvalue= [210,362,521,112,552,321,517];
            var getvalue1= [995,962,125,362,652,512,336];
            // 初始化 echarts 实例
            const myChart = this.$echarts.init(this.$refs.salesId);
             // 指定图表的配置项和数据
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '16%',
                    left: '3%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                legend: {
                    data: [
                        {
                            name: '销售金额'
                        },
                        {
                            name: '充值金额'
                        }
                    ],
                    left: "60%",
                    top:"4%",
                    textStyle: {
                        color: "#A1D5FF",
                        fontSize: 12
                    }, 
                    type:'plain',
                    icon:'rect',
                    itemWidth: 12,  // 设置宽度
                    itemHeight: 12,
                    itemGap: 12, // 设置间距

                },
                xAxis: [{
                    data: getname,
                    axisLabel: {
                        margin: 10,
                        color: '#A1D5FF',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#102E74',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                }],
                yAxis: [{
                    type:'value',
                    axisLabel: {
                        color: '#A1D5FF',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#102E74'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#102E74',
                        }
                    }
                }],
                series: [
                    {
                        name:'销售金额',
                        symbolSize: 8,
                        type: "line",
                        data: getvalue,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                color: '#2CEA63',
                                shadowColor: 'rgba(93,241,255 ,0.7)',
                                shadowBlur: 10,
                            },

                        }
                    },
                    {
                        name:'充值金额',
                        symbolSize: 8,
                        type: "line",
                        data: getvalue1,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                color: '#088FFD',
                                shadowColor: '#FFEED9FF',
                                shadowBlur: 10,
                            },

                        }
                    }
                ]
            }
        
            // 使用配置项显示图表
            myChart.setOption(option);
        }
    }
};
</script>

<style lang="scss" class>
.sales-echart{
    width: 456px;
    height: 480px;
    .sales-content{
        width: 100%;
        height: 436px;
        background: linear-gradient( 180deg, rgba(7,29,65,0.1) 0%, rgba(10,47,107,0.4) 100%);
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(34, 83, 135, 1), rgba(42, 112, 186, 1), rgba(34, 83, 135, 1), rgba(57, 128, 202, 1), rgba(34, 83, 135, 1)) 1 1;
    }
    .sales-item{
        width: 130px;
        height: 66px;
        background: url("../../assets/sales-bg.png") center no-repeat;
        background-size: 100% 100%;
        font-size: 12px;
        color: #FFFFFF;
    }
    .item-number{
        padding-bottom: 4px;
        font-weight: bold;
        font-size: 20px;
        color: #FFFF53;
    }
    .sales-title{
        padding: 24px 0px 12px;
        font-size: 14px;
        color: #FFFFFF;
        border-bottom: 1px solid #053269;
    }
    .sales-echarts{
        width: 448px;
        height: 276px;
    }
}
</style>